<template>
	<view class="content">


		<scroll-view scroll-x>
			<view class="baby">
				<view :class="index==Xindex?'babyItem activeBaby':'babyItem'" v-for="(item ,index) in babyList"
					:key="index" @click="activeBaby(index)">
					<image :src="item.pic" mode="aspectFill"></image>
					<view class="name">
						{{item.user}}
					</view>
				</view>
				<u-empty v-if="!babyList.length" text="暂未添加宝贝" mode="list" style="margin: 0 auto;"></u-empty>
			</view>


		</scroll-view>



		<lxCalendar @change="change" :dot_lists_a="time.truancy" :dot_lists_b="date1" :dot_lists_c="date2"
			:dot_lists_d="time.catch"></lxCalendar>
		<!-- 		<view class="reminder">
			<u-icon name="info-circle" color="red" size="30"></u-icon>友情提示：退课和退班前请于培训机构提前沟通
		</view> -->
		<view class="course" v-for="(item ,index) in studyList" :key="index">

			<span :class="item.truancy==1?'silk-ribbon1 silk-ribbon2':item.class_zt==1?'silk-ribbon3 silk-ribbon1':'silk-ribbon1'"
				v-if="item.truancy==1||item.catch_zt==1||item.class_zt==1"><span>{{item.truancy==1?'请假':item.class_zt==1?'已签到':'补课'}}</span></span>

			<view class="course_left">
				<u-time-line>
					<u-time-line-item class="" nodeTop="8">
						<template v-slot:content>
							<view style="height: 40upx;position: relative;bottom: 10upx;">
								<view class="startTime">{{item.time_s}}</view>
							<!-- 	<view class="type">
									<text>已签到</text>
								</view> -->
							</view>
						</template>
					</u-time-line-item>
					<u-time-line-item nodeTop="18">
						<template v-slot:content>
							<view style="height: 20upx;">
								<view class="overTime">{{item.time_s_en}}</view>
						<!-- 		<view class="over" v-if="item==1">
									<text>已签到</text>
								</view> -->
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>
			</view>

			<view class="course_right">
				<view class="title">
					<view class="">
						{{item.title}}
					</view>
					<view class="">
						{{item.user}}
					</view>
				</view>
				<view class="address">
					<u-icon name="map-fill" color="#a7a7a7" size="30"></u-icon>
					{{item.add}}
				</view>

			</view>

			<view class="esc" @click="esc(item)">
				退课
			</view>

			<view class="rest" v-if="compareDate" @click="rest(item)"
				:style="{background:item.truancy==0?'#FF515E':'#adadad'}">
				{{item.truancy==0?'请假':'已请假'}}
			</view>
		</view>
		<u-empty v-if="!studyList.length" :text="date+'暂无课程'" mode="list" margin-top="120"></u-empty>
		<Loading />
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import lxCalendar from '../../components/lx-calendar/lx-calendar.vue'
	export default {
		components: {
			lxCalendar,
		},
		data() {
			return {
				babyList: [],
				Xindex: 0,
				// time: '',
				studyList: [],
				date: '',
				time: '',
				date1: [],
				date2: [],
				date_s: ''
			}
		},
		onLoad() {
			this.date = this.$u.timeFormat(this.timestamp, 'yyyy-mm-dd')
		},
		onShow() {
			this.$myRuquest('home/user/baby_list').then(res => {
				if (res.code == 400) {
					this.babyList = res.data
					if (res.data.length) {
						this.newData()
						this.calendar()
					}
				}
			})
		},
		computed: {
			compareDate: function() {
				return new Date(this.date).getTime() > new Date().getTime()
			}
		},
		methods: {
			//日历标识
			calendar() {
				let date = this.date.split('-')
				date.pop()
				date = date.join('-')
				if (date == this.date_s) return;
				this.$myRuquest('home/user/calendar', {
					baby_id: this.babyList[this.Xindex].id,
					date
				}).then(res => {
					if (res.code == 400) {
						this.time = res.data
						this.date2 = []
						this.date1 = []
						let arr = []
						this.date_s = date
						this.time.class.forEach(item => {
							if (new Date(item).getTime() > new Date().getTime()) {
								let time = new Date(item).getTime()
								time = this.$u.timeFormat(time, 'yyyy-mm-dd');
								this.date2.push(time)
							} else {
								let time = new Date(item).getTime()
								time = this.$u.timeFormat(time, 'yyyy-mm-dd');
								this.date1.push(time)
							}
						})
					}
				})
			},
			newData() {
				let data = {
					baby_id: this.babyList[this.Xindex].id,
					time: this.date
				}
				this.$myRuquest('home/user/study_list', data).then(res => {
					if (res.code == 400) {
						this.studyList = res.data
					}
				})
			},
			//切换宝贝
			activeBaby(index) {
				this.Xindex = index
				this.time = {}
				this.date1 = []
				this.date2 = []
				this.date_s = ''
				this.calendar()
				this.newData()
			},
			//日期切换
			change(e) {
				this.date = e.fulldate
				this.newData()
				this.calendar()
			},
			rest(item) {
				if (item.truancy == 1) return;
				let that = this
				uni.showModal({
					title: '提示',
					content: '您确定要请假吗？',
					success: function(res) {
						if (res.confirm) {
							let data = {
								order_id: item.order_id,
								date: `${that.date} ${item.time_s}` //注意空格，不要删除
							}
							that.$myRuquest('home/user/courses_truancy', data, 'POST').then(res => {
								if (res.code == 400) {
									that.$refs.uToast.show({
										title: res.msg,
										type: 'success'
									})
									// that.calendar()
									that.newData()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			esc(item) {
				let that = this
				uni.showModal({
					title: '提示',
					content: `退课前请于培训机构提前沟通!!!`,
					success: function(res) {
						if (res.confirm) {
							that.$myRuquest('home/user/courses_retreat', {
								order_id: item.order_id
							}, 'POST').then(res => {
								if (res.code == 400) {
									that.$refs.uToast.show({
										title: res.msg,
										type: 'success'
									})
									that.newData()
								} else {
									that.$refs.uToast.show({
										title: res.msg,
										type: 'warning'
									})
								}
							})
						}

					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.content{
		padding: 20upx;min-height: 100vh;
	background-color: #F4F5F7;
	}
	.reminder {
		padding: 30upx 20upx 0 20upx;
	}

	scroll-view {
		background-color: #fff;
		padding: 20upx 10upx;

		border-radius: 12upx;
		margin-bottom: 20upx;
		width: calc(100vw - 60upx);
	}

	.baby {
		display: flex;
		// flex-wrap: wrap;
		padding: 10upx 15upx;

		.babyItem {
			width: 120upx;
			padding: 10upx 0;
			position: relative;
			transition: all .3s;
			margin-right: 10upx;
			border-radius: 12upx;

			image {
				display: block;
				width: 100upx;
				height: 100upx;
				margin: 0 auto;
				border-radius: 8upx;
			}

			.name {
				font-size: 24upx;
				text-align: center;
			}

			.esc {
				position: absolute;
				top: -20upx;
				right: -20upx;
			}
		}
	}

	.course {
		display: flex;
		width: calc(100% -20upx);
		margin: 20upx 0;
		padding: 30upx 30upx 20upx 30upx;
		position: relative;
		background-color: #fff;
		border-radius: 12upx;

		justify-content: center;

		.silk-ribbon1 {
			position: absolute;
			top: -6upx;
			right: 100upx;
			color: #fff;
		}

		.silk-ribbon1:after {
			position: absolute;
			content: "";
			display: block;
			width: 0;
			height: 0;
			border-left: 46upx solid transparent;
			border-right: 46upx solid transparent;
			border-top: 20upx solid #ff7802;
		}

		.silk-ribbon1 span {
			position: relative;
			display: inline-block;
			text-align: center;
			background: #ff7802;
			font-size: 24upx;
			line-height: 2;
			padding: 12upx 8upx 10upx;
			border-top-right-radius: 8upx;
			width: 80upx;
		}

		.silk-ribbon1 span:before,
		.silk-ribbon1 span:after {
			position: absolute;
			content: "";
			display: block;
		}

		.silk-ribbon1 span:before {
			background: #ff7802;
			height: 6upx;
			width: 6upx;
			left: -6upx;
			top: 0;
		}

		.silk-ribbon1 span:after {
			background: #be5601;
			height: 6upx;
			width: 8upx;
			border-radius: 8upx 8upx 0 0;
			left: -8upx;
			top: 0;
		}

		.silk-ribbon2:after {
			border-top: 10upx solid #007aff;
		}

		.silk-ribbon2 span:before,
		.silk-ribbon2 span {
			background: #007aff;
		}

		.silk-ribbon2 span:after {
			background-color: #0053ad;
		}

	.silk-ribbon3:after {
			border-top: 10upx solid #ccc;
		}

		.silk-ribbon3 span:before,
		.silk-ribbon3 span {
			background: #ccc;
		}

		.silk-ribbon3 span:after {
			background-color: #ccc;
		}
		.course_left {
			margin-right: 20upx;
			flex: 1;
			margin-bottom: 50upx;

			.type {
				text {
					border: 1upx solid #be5601;
					color: #be5601;
					padding: 0 8upx;
					border-radius: 6upx;
					font-size: 20upx;
				}

			}

			.over {
				text {
					border: 2upx solid #c1c1c1;
					color: #c1c1c1;
					padding: 0 8upx;
					border-radius: 6upx;
					font-size: 20upx;
				}
			}

			.startTime,
			.overTime {
				font-size: 36upx;
				font-weight: 900;

				text {
					color: #ccc;
					font-size: 20upx;
					margin-right: 10upx;
					position: relative;
					bottom: 8upx;
				}
			}
		}

		.course_right {
			flex: 4;
			position: relative;
			bottom: 6upx;

			.title {
				// padding-top: 10upx;
				width: 400upx;
				font-weight: 900;

				view:nth-child(1) {
					color: #000;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				view:nth-child(2) {
					font-size: 22upx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					color: #003c7c;
					margin: 5upx 0;
				}
			}

			.address {
				color: #888888;
				width: 500upx;
				font-size: 26upx;
				position: absolute;
				bottom: 50upx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.esc {
			position: absolute;
			top: 20upx;
			right: 20upx;
			color: red;
			font-size: 24upx;
		}

		.rest {
			background-color: red;
			color: #fff;
			border-radius: 10upx;
			width: 100upx;
			height: 50upx;
			line-height: 50upx;
			text-align: center;
			position: absolute;
			bottom: 20upx;
			right: 20upx;
		}
	}

	.activeBaby {
		background-color: rgb(247, 247, 247);
		transform: scale(1.1);
	}
</style>
